<template>
  <div class="container">
    <sq-header :selected="1"></sq-header>
    <div class="page-500">
      <img src="../assets/error_500.png">
      <div class="page-500-content">
          <div class="page-500-tips">
            <h3>哎，服务器被外星人绑架了...</h3>
            <p>很抱歉，请稍等片刻再刷新页面</p>
          </div>
          <button @click="gotoIndexPage">返回首页</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import SqHeader from '../components/Header'
  Vue.component(SqHeader.name, SqHeader)

  export default {
    name: 'Error500',
    data () {
      return {
      }
    },
    methods: {
      gotoIndexPage() {
        this.$router.push({ name: 'Index'});
      }
    }
  }
</script>

<style scoped>

  .container {
    background-color: #efefef;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .page-500{
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #efefef;
      flex-grow: 1;
      justify-content: space-between;
  }

  .page-500 img {
      width: 100%;
      height: 83vw;
  }

  @media screen and (min-width: 480px) {
    .page-500 img {
      width: 375px;
      height: 313px;
    }
  }

  .page-500-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-basis: 260px;
    margin-bottom: 104px;
  }
  .page-500-tips h3 {
    margin: 12px 0px 0px 0px;
    font-size: 16px;
    font-weight: normal;
  }

  .page-500-tips p {
    margin: 6px 0px 0px 0px;
    font-size: 14px;
    color: #666;
  }

  .page-500-content button {
    background-color: #fe6b40;
    color: #fff;
    width: 80vw;
    font-size: 16px;
    border: 0px;
    height: 44px;
    margin-top: 12px;
    border-radius: 2px;
  }

</style>
